<template>
    <form @submit.prevent="onSubmit">
        <dx-form :form-data="formData" :disabled="loading">
            <dx-item data-field="password"
                     editor-type="dxTextBox"
                     :editor-options="{ stylingMode: 'filled', placeholder: 'Password', mode: 'password' }">
                <dx-required-rule message="Password is required" />
                <dx-label :visible="false" />
            </dx-item>
            <dx-item data-field="confirmedPassword"
                     editor-type="dxTextBox"
                     :editor-options="{ stylingMode: 'filled', placeholder: 'Confirm Password', mode: 'password' }">
                <dx-required-rule message="Password is required" />
                <dx-custom-rule message="Passwords do not match"
                                :validation-callback="confirmPassword" />
                <dx-label :visible="false" />
            </dx-item>
            <dx-button-item>
                <dx-button-options width="100%"
                                   type="default"
                                   template="changePassword"
                                   :use-submit-behavior="true">
                </dx-button-options>
            </dx-button-item>

            <template #changePassword>
                <div>
                    <span class="dx-button-text">
                        <dx-loadIndicator v-if="loading" width="24px" height="24px" :visible="true" />
                        <span v-if="!loading">Continue</span>
                    </span>
                </div>
            </template>
        </dx-form>
    </form>
</template>

<script lang="ts">
    import DxForm, {
        DxItem,
        DxLabel,
        DxButtonItem,
        DxButtonOptions,
        DxCustomRule,
        DxRequiredRule
    } from 'devextreme-vue/form';
    import DxLoadIndicator from 'devextreme-vue/load-indicator';
    import { Options, Vue } from 'vue-class-component';
import { Inject } from 'vue-property-decorator';
import { ApiTool } from '../api/api-tool';

    @Options({
        components: {
            DxForm,
            DxItem,
            DxLabel,
            DxButtonItem,
            DxButtonOptions,
            DxRequiredRule,
            DxCustomRule,
            DxLoadIndicator
        }
    })
    export default class ChangePasswordForm extends Vue {
        loading = false;
        formData = {
            password: ''
        };

        @Inject()
        apiTool: ApiTool;

        onSubmit() {
        }

        confirmPassword(e) {
            return e.value === this.formData.password;
        }

        mounted() {
        }
    }
</script>

<style>
</style>
